<template>
  <div class="trade">
    <Loading :isLoading = "isLoading" />
    <div class="trade-content">
      <div class="item" v-for="itemTrade in collArr" :key="itemTrade.name">
        <div class="date">{{itemTrade.show_time}}</div>
        <div class="title">{{itemTrade.title}}</div>
<!--        <div class="name">-->
<!--          <img :src="itemTrade.image_main" alt="">-->
<!--        </div>-->
        <div class="location right"><div class="name">Location: </div><div class="content">{{itemTrade.address}}</div></div>
        <div class="booth right"><div class="name">Booth: </div><div class="content">{{itemTrade.show_code}}</div></div>
      </div>
    </div>
  </div>
</template>
<script>
import  {defineComponent,ref, onMounted} from 'vue';
import {getTradeShowList} from '../../api/contact'
import Loading from '../Loading.vue'
export default defineComponent({
  name:"TradeShowsCom",
  components:{Loading},
  setup() {
    const collArr = ref([]);
    let isLoading = ref(true)
    onMounted(()=>{
      getTradeShowList().then((res)=>{
        if(res && res.code === 200){
          collArr.value = res.data
          isLoading.value = false
        }
      })
    })

    return {
      collArr,
      isLoading
    };
  },
});
</script>
<style lang="scss" scoped>
.trade{
  .trade-content{
    margin:30px auto;
    width:70vw;
    display: grid;
    grid-template-columns: repeat(3, minmax(33.33%, 33.33%));
    grid-gap: 15px;
    text-align: left;
    .item{
      margin-bottom: 20px;
      line-height: 30px;
      .date{
        font-size:18px;
        font-weight:700;
        line-height: 40px;
        height:40px;
      }
      .name{
        height:100px;
        img{
          width:80px;
          height:auto;
          margin:10px 0px;
        }
      }
      .title{
        height:50px;
        font-size:20px;
        line-height: 50px;
      }
      .right{
        display:flex;
        .name{
          display:inline-block;
          width:65px;
          text-align:right;
          padding-right: 8px;
          box-sizing: border-box;
          font-weight: 500;
        }
        .content{
          word-break:break-all;
        }
      }
    }
  }
}
</style>

